<template>
  <view class="container">
    <view class="menu">
      <view class="menu-item">
        <view class="tp">
          <view class="tp-fl">
            主账号
          </view>
          <view class="tp-fr">
            认证中
          </view>
        </view>
        <view class="info">
          <image class="shop_logo" src="/static/images/shopLogo.png" mode=""></image>
          <view class="middle">
            <view class="title">
              贵州品好国际
            </view>
            <view class="address">
              浦东新区锦绣路2755号
            </view>
            <view class="labels">
              <view class="label-item">
                个体工商户
              </view>
            </view>

          </view>
          <view class="edit-label">
            修改信息
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    .menu{
      padding: 30rpx;
      box-sizing: border-box;
      .menu-item{
        background: #FFFFFF;
        border-radius: 30rpx;
        margin-bottom: 30rpx;
        .tp{
          display: flex;
          justify-content: space-between;
          .tp-fl{
            width: 104rpx;
            height: 42rpx;
            background: #EA2222;
            border-radius: 20rpx;
            font-weight: bold;
            font-size: 20rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 42rpx;
          }
          .tp-fr{
            width: 154rpx;
            height: 50rpx;
            background: #FFF3E9;
            border-radius: 0rpx 30rpx 0rpx 30rpx;
            font-weight: bold;
            font-size: 24rpx;
            color: #FF8A23;
            text-align: center;
            line-height: 50rpx;
          }
        }
        .info{
          padding: 20rpx 30rpx 30rpx 30rpx;
          box-sizing: border-box;
          display: flex;
          .shop_logo{
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          .middle{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            flex: 1;
            .title{
              font-weight: bold;
              font-size: 32rpx;
              color: #333333;
            }
            .address{
              font-weight: 400;
              font-size: 24rpx;
              color: #AAAAAA;
            }
            .labels{
              display: flex;
              flex-wrap: wrap;
              .label-item{
                font-weight: 400;
                font-size: 20rpx;
                color: #EA2222;
                border-radius: 6rpx;
                border: 1rpx solid #EA2222;
                margin-right: 20rpx;
                line-height: 27rpx;
              }
            }
          }
          .edit-label{
            width: 128rpx;
            height: 44rpx;
            background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
            border-radius: 88rpx;
            font-weight: bold;
            font-size: 20rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 44rpx;
          }
        }
      }
    }
  }
</style>